<template>
  <div>
    Child

    <!-- <p v-if="isShow">name is {{ name }} ,{{ age }}</p> -->
    <p v-if="isShow">name is {{ $attrs.name }} ,{{ $attrs.age }}</p>

    <p>address is {{ address }}</p>
    <p>hobby is {{ hobby }}</p>
    <p>
      <button @click="sendValueToParent">传值给父组件</button>
    </p>
  </div>
</template>

<script setup>
// defineProps专门用于接收父组件传递过来的值
defineProps({
  // name: {
  //   type: String,
  //   default: '李四'
  // },
  // age: Number,
  isShow: {
    type: Boolean,
    default: true
  },
  address: {
    type: Object,
    default: () => ({})
  },
  hobby: Array
})

// vue2是通过对象：this.$emit()
// vue3是通过函数：defineEmits定义出来的emits函数
const emits = defineEmits(['myevent'])

const sendValueToParent = () => {
  /**
   * 参数1：自定义事件类型，别叫 click、doubluClick
   * 参数2：要传递的值
   */
  emits('myevent', { username: 'admin', password: '123' })
}
</script>
